<template>
	<view>
		<view class="header">
			<view class="home-content">
				<view class="home-title">
					<uni-icons
						type="left"
						color="#fff"
						size="20"
						@click="back_reload"></uni-icons>
					<view class="btn">{{ "动态详情" }}</view>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="detail-title">
				{{ detailMessage.dynamicTitle }}
			</view>
			<view class="detail-content">
				{{ detailMessage.dynamicContent }}
			</view>
			<view class="detail-picList">
				<img
					v-for="(item, index) in detailMessage.hyDynamicImgList"
					:key="index"
					:src="item.dynamicImg"
					@click="imageClick(index)"
					alt="" />
			</view>
            <view v-if="detailMessage.demandId" class="desc-list">
			  <view class="desc-item">
				<view class="label">需求部门:</view>
				<view class="value"> {{ detailMessage.deptDemandName }} </view>
			  </view>
              <view class="desc-item">
                <view class="label">协助部门:</view>
                <view class="value"> {{ detailMessage.deptHelpName }} </view>
              </view>
              <view class="desc-item">
                <view class="label">完成时间:</view>
                <view class="value"> {{ detailMessage.updateTime }} </view>
              </view>
			  <view class="redo" v-if="!detailMessage.dynamicAdvice && detailMessage.demandDeptId == depId">
				<view class="redo-item">
				  <text class=""> 评价: </text>
				  <uni-rate :value="dynamicMark" @change="onChange"/>
				</view>
				<text> 建议: </text>
				<view class="redo-item">
				  <uni-easyinput
				  	type="textarea"
				  	v-model="dynamicAdvice"
				  	placeholder="请输入动态建议"/>
				</view>
				<button style="margin-top: 20px;" type="primary" @click="sub('Form')">提交</button>
			  </view>
			  <view class="redo" v-else>
				 <view class="redo-item">
				   <text class=""> 评价: </text>
				   <uni-rate :value="detailMessage.dynamicMark" :readonly="true"/>
				 </view>
				 <view v-if="detailMessage.demandDeptId == depId || detailMessage.deptId == depId" class="redo-item">
					 <text> 建议: </text>
				   <view>{{ detailMessage.dynamicAdvice }}</view>
				 </view>
			  </view>
            </view>
		</view>
	</view>
</template>

<script>
import api from "../../api/api";
export default {
	onLoad(options) {
		var data = {
			id: options.id,
		};
		api.queryById(data).then((e) => {
			if (e.data.code == 200) {
				this.detailMessage = e.data.result;
				if(e.data.result.hyDynamicImgList){
					for(var i = 0; i < e.data.result.hyDynamicImgList.length;i++){
						this.picList.push(e.data.result.hyDynamicImgList[i].dynamicImg)
					}
				}
			}
		});
	},
	data() {
		return {
			detailMessage: {},
			depId: uni.getStorageSync("userInfo").result.userInfo.departIds,
			dynamicAdvice: '',
			dynamicMark: 0,
			picList: [],
		};
	},
	methods: {
		back_reload() {
			let pages = getCurrentPages();
			uni.navigateBack({
				delta: 1,
				success() {
					pages[pages.length - 2].$vm.reloadList();
				},
			});
		},
		sub(){
			var data = {
				id: this.detailMessage.id,
				dynamicAdvice: this.dynamicAdvice,
				dynamicMark: this.dynamicMark,
				hyDynamicImgList: this.detailMessage.hyDynamicImgList,
			};
			api.edit(data).then((e) => {
				if (e.data.success) {
					this.detailMessage.dynamicAdvice = this.dynamicAdvice
					this.detailMessage.dynamicMark = this.dynamicMark
					uni.showToast({
						title: "提交成功",
						icon: "success",
						duration: 1000,
					});
				}else{
					uni.showToast({
						title: e.data.message,
						icon: "warn",
						duration: 1000,
					});
				}
			});
		},
		onChange(e) {
			this.dynamicMark = e.value
		},
		imageClick(index){
			uni.previewImage({
				urls: this.picList,
				current: index,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.header {
	height: 50px;
	width: 100vw;
	.home-content {
		height: 50px;
		width: 100vw;
		position: fixed;
		top: 0;
		color: #fff;
		font-weight: 700;
		.home-title {
			position: relative;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background-color: #2163e0;
			padding-left: 10px;
			.btn {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}
}
.detail {
	width: 100vw;
	margin: 0px auto;
	background-color: #fff;
	padding-bottom: 20px;
    view{
        box-sizing: border-box;
    }
	.detail-title {
		font-weight: 700;
		font-size: 20px;
		margin-left: 10px;
		margin-bottom: 10px;
		padding-top: 10px;
	}
	.detail-content {
		width: 95%;
		font-size: 14px;
		color: #7f7f7f;
		margin-left: 10px;
	}
	.detail-picList {
        padding: 10px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		img {
			width: 30%;
			height: 100px;
		}
	}
	.desc-list {
	  margin-top: 30upx;
	  margin-left: 10px;
	  color: #666;
	  .desc-item {
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
		margin-top: 5px;
	    .label {
	      text-align: right;
	      flex-shrink: 0;
	      min-width: 100upx;
	    }
	    .value {
	      margin-left: 16upx;
	      flex-grow: 1;
	    }
	  }
	}
}
.redo {
  
  padding-top: 40upx;
  .redo-item {
    margin: 25upx 0;
    display: flex;
    align-items: center;
    text {
      margin-right: 20upx;
    }
  }
}
</style>
